<template>
  <div class="app-container home">
    <div v-for="m in menu" style="margin-bottom:20px;">
      <div>{{ m.meta.title }}</div>
      <div v-for="c in m.children" style="float: left;margin: 10px;">
        <el-button
          type="primary" plain size="mini" @click="go(m,c)">{{ c.meta.title }}
        </el-button>
      </div>
      <div style="clear: both;"></div>
    </div>
  </div>
</template>

<script>
import {getRouters} from '@/api/menu'

export default {
  name: "Index",
  data() {
    return {
      menu: []
    };
  },
  created() {
    getRouters().then(res => {
      this.menu = res.data;
    });
  },
  methods: {
    go(m, c) {
      this.$router.push(m.path + '/' + c.path);
    }
  }
};
</script>

<style scoped lang="scss">
</style>

